<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <style>
      body {
        display: flex;
        justify-content: center;
      }
      .da {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        align-content: space-around;
        /* align-items: center; */
        /* flex-direction: column; */
        /* align-items: flex-end; */
        flex-wrap: wrap;
        /* align-content: space-between; */
      }
      .xiao {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: black;
        /* flex: 1 1 auto; */
      }
    </style> -->
    <!-- <style>
      * {
        margin: 0;
        padding: 0;
      }
      .HolyGrail {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      header,
      footer {
        flex: 1;
        background: black;
      }

      .HolyGrail-body {
        background: #ccc;
        display: flex;
        flex: 1;
      }

      .HolyGrail-content {
        background: red;
      }

      .HolyGrail-nav,
      .HolyGrail-ads {
        background: blue;
        /* 两个边栏的宽度设为12em */
      }

      .HolyGrail-nav {
        /* 导航放到最左边 */
        order: -1;
      }
      .HolyGrail-nav,
      .HolyGrail-ads,
      .HolyGrail-content {
        flex: auto;
      }
    </style> -->
    <!-- <style>
      .Media {
        width: 400px;
        border: 1px solid #ccc;
        display: flex;
      }

      .Media-figure {
        margin: 1em;
      }

      .Media-body {
        flex: 1;
      }
    </style> -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .Site {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        background: #ccc;
      }
      header {
        height: 150px;
        background: red;
      }
      .Site-content {
        flex: 1;
        background: green;
      }
      footer {
        height: 150px;
        background: red;
      }
    </style>
  </head>

  <body class="Site">
    <header>我是头部</header>
    <main class="Site-content">jkashdkjahsjk</main>
    <footer>我是底部呀</footer>
    <!-- <div class="Media">
      <img
        class="Media-figure"
        src="../../img/jk.png"
        alt=""
        width="100"
        height="100"
      />
      <p class="Media-body">
        2018年4月10日下午,国家广播电视总局发布公告《国家广播电视总局责令“今日头条”网站永久关停“内涵段子”等低俗视听产品》。
        据公告：国家广播电视总局在督察“今日头条”网站整改工作中,发现该公司组织推送的“内涵段子”客户端软件和相关公众号存在导向不正、格调低俗等突出问题,引发网民强烈反感。为维护网络视听节目传播秩序,清朗互联网空间视听环境,依据相关法规的规定,总局责令“今日头条”永久关停“内涵段子”客户端软件及公众号,并要求该公司举一反三,全面清理类似视听节目产品。
        4月10日,今日头条回应,根据监管部门要求,今日头条将永久关停“内涵段子”客户端软件及公众号,并向内涵段子的用户及公众致歉。今日头条将对全线产品进行严格审查,举一反三,积极整改,坚持正确的价值导向,营造风清气正的网络环境。
        [19-20]
      </p>
    </div> -->
    <!-- <header>...</header>
    <div class="HolyGrail-body">
      <main class="HolyGrail-content">...</main>
      <nav class="HolyGrail-nav">...</nav>
      <aside class="HolyGrail-ads">...</aside>
    </div>
    <footer>...</footer> -->
  </body>
  <!-- <body>
    <div class="da">
      <div class="xiao">
        按时链接啊山东科技阿斯卡纶进度款拉时间段可垃圾收到了科技阿斯利康大家撒
      </div>
      <div class="xiao"></div>
      <div class="xiao"></div>
      <div class="xiao"></div>
      <div class="xiao"></div>
      <div class="xiao"></div>
      <div class="xiao"></div>
      <div class="xiao"></div>
      <div class="xiao"></div>
    </div>
  </body> -->
</html>
